<template>
	<view class="content">
    <!-- 温湿度设备 -->
    <u-popup :show="showtahinput" mode="center" @close="close">
      <view class="innerTahBox">
        <u--form
          labelPosition="left"
          :model="deviceModel"
          :rules="rules"
          labelWidth="80px"
          ref="tahForm"
        >
          <u-form-item
              label="温度上限"
              prop="deviceInfo.maxH"
              borderBottom
              ref="item1"
          >
            <u--input
                v-model="deviceModel.deviceInfo.maxH"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="温度下限"
              prop="deviceInfo.minH"
              borderBottom
              ref="item1"
          >
            <u--input
                v-model="deviceModel.deviceInfo.minH"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="湿度上限"
              prop="deviceInfo.maxT"
              borderBottom
              ref="item1"
          >
            <u--input
                v-model="deviceModel.deviceInfo.maxT"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="湿度下限"
              prop="deviceInfo.minT"
              borderBottom
              ref="item1"
          >
            <u--input
                v-model="deviceModel.deviceInfo.minT"
                border="none"
            ></u--input>
          </u-form-item>
          <view class="lastForSwitch">
            <view class="customButton" @click="submitTah">保存</view>
          </view>
        </u--form>
      </view>
    </u-popup>
    <!-- 氨气 / 土壤温湿度 -->
    <u-popup :show="showOtherDevice" mode="center" @close="close">
      <view class="innerTahBox">
        <u--form
          labelPosition="left"
          :model="otherDevice"
          :rules="rules"
          labelWidth="80px"
          ref="tahForm"
        >
          <u-form-item
              label="氨气上限"
              borderBottom
              ref="item1"
          >
            <u--input
                v-model="otherDevice.deviceInfo.maxAq"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="氨气下限"
              borderBottom
              ref="item1"
          >
            <u--input
                v-model="otherDevice.deviceInfo.minAq"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="氮含量上限"
              borderBottom
              ref="item1"
          >
            <u--input
                v-model="otherDevice.deviceInfo.maxTrd"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="氮含量下限"
              borderBottom
              ref="item1"
          >
            <u--input
                v-model="otherDevice.deviceInfo.minTrd"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="电导率上限"
              borderBottom
              ref="item1"
          >
            <u--input
                v-model="otherDevice.deviceInfo.maxTrddl"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="电导率下限"
              borderBottom
              ref="item1"
          >
            <u--input
                v-model="otherDevice.deviceInfo.minTrddl"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="肥力上限"
              borderBottom
              ref="item1"
          >
            <u--input
                v-model="otherDevice.deviceInfo.maxTrfl"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="肥力下限"
              borderBottom
              ref="item1"
          >
            <u--input
                v-model="otherDevice.deviceInfo.minTrfl"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="钾含量上限"
              borderBottom
              ref="item1"
          >
            <u--input
                v-model="otherDevice.deviceInfo.maxTrj"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="钾含量下限"
              borderBottom
              ref="item1"
          >
            <u--input
                v-model="otherDevice.deviceInfo.minTrj"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="磷含量上限"
              borderBottom
              ref="item1"
          >
            <u--input
                v-model="otherDevice.deviceInfo.maxTrl"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="磷含量下限"
              borderBottom
              ref="item1"
          >
            <u--input
                v-model="otherDevice.deviceInfo.minTrl"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="酸碱度上限"
              borderBottom
              ref="item1"
          >
            <u--input
                v-model="otherDevice.deviceInfo.maxTrsjd"
                border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="酸碱度下限"
              borderBottom
              ref="item1"
          >
            <u--input
                v-model="otherDevice.deviceInfo.minTrsjd"
                border="none"
            ></u--input>
          </u-form-item>
          <view class="lastForSwitch">
            <view class="customButton" @click="submitOther">保存</view>
          </view>
        </u--form>
      </view>
    </u-popup>




    <u-popup :show="showAddSwtich" mode="center" @close="close">
      <view class="innerTahBox">
        <u--form
          labelPosition="left"
          :model="switchModel"
          :rules="rulesForSwitch"
          labelWidth="120px"
          ref="switchForm"
        >
          <u-form-item
              label="开关"
              prop="switchInfo.switchName"
              @click="showSwitchFun"
              borderBottom
              ref="item1"
          >
            <u--input
              v-model="switchModel.switchInfo.switchName"
              placeholder="请选择开关设备"
              disabled
              disabledColor="#ffffff"
              border="none"
            ></u--input>
            <u-icon
              slot="right"
              name="arrow-right"
            ></u-icon>
          </u-form-item>
          <u-form-item
              label="开关路数"
              prop="switchInfo.num"
              @click="showSwitchNumFun"
              borderBottom
              ref="item1"
          >
            <u--input
              v-model="switchModel.switchInfo.num"
              placeholder="请选择开关路数"
              disabled
              disabledColor="#ffffff"
              border="none"
            ></u--input>
            <u-icon
              slot="right"
              name="arrow-right"
            ></u-icon>
          </u-form-item>
          <u-form-item
              label="开关默认状态"
              prop="switchInfo.maxT"
              borderBottom
              ref="item1"
          >
            <u-switch size="40" v-model="switchDefaultValue" @change="changeValue"></u-switch>
          </u-form-item>
          <view class="lastForSwitch">
            <view class="customButton" @click="submitSwitch">保存</view>
          </view>
        </u--form>
      </view>
    </u-popup>
    
    <u-popup :show="SwitchShowDetail" mode="center" @close="close">
      <view class="afterForSwitch">
        <view class="customButton" @click="addAgainSwitch">新增开关设备</view>
        <view class="customButton" @click="SwitchShowDetail = false">关闭</view>
      </view>
      <view class="innerTahBox">
        <div class="switchShowBoxFirLine">
          <div class="switchIndex">
            序号
          </div>
          <div class="switchNameBox">
            开关名称
          </div>
          <div class="switchNumBox">
            路数
          </div>
          <div class="switchStatusBox">
            状态
          </div>
          <div class="switchFunBox">
            操作
          </div>
        </div>
        <div class="switchShowBox" v-for="(item,index) in allSwitchData" :key="index">
          <div class="switchIndex">
            {{index+1}}
          </div>
          <div class="switchNameBox">
            {{item.switchName}}
          </div>
          <div class="switchNumBox">
            {{item.num}}
          </div>
          <div class="switchStatusBox">
            <u-switch size="40" v-model="item.value" @change="changeValue"></u-switch>
          </div>
          <div class="switchFunBox">
            <span style="color: #4c00ff;" @click="deleteAllSwitchData(index)">删除</span>
          </div>
        </div>
      </view>
    </u-popup>

    
    <view class="realBox_two" v-for="(item,index) in resultArr" :key="index">
      <view class="titleBoxFIR">{{ index + 1 }}</view>
      <view class="firLine">
        <view class="lineEvery"></view>
        <view>
          <span style="font-weight: 600;">设备名称：</span>{{ item.tahName }}
        </view>
        <view>
          <u-icon name="trash-fill" size="50" color="#4c00ff" @click="deletrResultArr(index)"></u-icon>
        </view>
      </view>
      <view class="senBox">
        <view class="lineEvery"></view>
        <view class="deviceArg" v-if="item.tagDeviceType === 1">
          <view class="imageBox">
            <image src="/static/maxH.png" alt="" />
          </view>
          <view>
            {{ item.maxH === '' ? '-' : item.maxH }}
          </view>
        </view>
        <view class="deviceArg" v-if="item.tagDeviceType === 1">
          <view class="imageBox">
            <image src="/static/minH.png" alt="" />
          </view>
          <view>
            {{ item.minH === '' ? '-' : item.minH }}
          </view>
        </view>
        <view class="deviceArg" v-if="item.tagDeviceType === 1">
          <view class="imageBox">
            <image src="/static/maxT.png" alt="" />
          </view>
          <view>
            {{ item.maxT === '' ? '-' : item.maxT }}
          </view>
        </view>
        <view class="deviceArg" v-if="item.tagDeviceType === 1">
          <view class="imageBox">
            <image src="/static/minT.png" alt="" />
          </view>
          <view>
            {{ item.minT === '' ? '-' : item.minT}}
          </view>
        </view>
        <view class="deviceArg" v-if="item.tagDeviceType === 3 || item.tagDeviceType === 5">
          <view class="imageBox">
            <image src="/static/maxAq.png" alt="" />
          </view>
          <view>
            {{ item.maxAq === '' ? '-' : item.maxAq}}
          </view>
        </view>
        <view class="deviceArg" v-if="item.tagDeviceType === 3 || item.tagDeviceType === 5">
          <view class="imageBox">
            <image src="/static/minAq.png" alt="" />
          </view>
          <view>
            {{ item.minAq === '' ? '-' : item.minAq}}
          </view>
        </view>
        <view class="deviceArg" v-if="item.tagDeviceType === 3 || item.tagDeviceType === 5">
          <view class="imageBox">
            <image src="/static/maxTrd.png" alt="" />
          </view>
          <view>
            {{ item.maxTrd === '' ? '-' : item.maxTrd}}
          </view>
        </view>
        <view class="deviceArg" v-if="item.tagDeviceType === 3 || item.tagDeviceType === 5">
          <view class="imageBox">
            <image src="/static/minTrd.png" alt="" />
          </view>
          <view>
            {{ item.minTrd === '' ? '-' : item.minTrd}}
          </view>
        </view>
      </view>
      <view class="thrBox">
        <view class="lineEvery"></view>
        <view class="thrFlex">
          <span style="color: #4c00ff;" @click="addSwitch(index)" v-show="item.switchRuleList.length === 0">新增开关设备</span>
          <span style="color: #4c00ff;" @click="SwitchDetail(index)" v-show="item.switchRuleList.length > 0">查看开关设备</span>
        </view>
      </view>
      <view class="afterForSwitchforOne">
        <!-- <view class="customButton" @click="ToDetails(0,item.id)">查看</view> -->
        <view class="customButton" @click="toSetInputDetail(index,item.tagDeviceType)">查看/修改</view>
      </view>
    </view>
    <div class="addIcon">
      <u-icon name="plus-circle-fill" size="70" style="margin: 0 auto;" @click="addTahDevice"></u-icon>
      
      <div class="submitButton" @click="getResultArr">
        提交
      </div>
    </div>
    <u-action-sheet
      :show="showFirst"
      :actions="tahDeviceArr"
      title="请选择设备"
      @select="tahSelect"
      @close="closeTah"
    ></u-action-sheet>
    
    <u-action-sheet
      :show="showSwitchPop"
      :actions="switchArr"
      title="请选择开关设备"
      @close="showSwitchPop = false"
      @select="SwitchPopSelect"
    >
    </u-action-sheet>
    <u-action-sheet
      :show="showSwitchNumPop"
      :actions="makeArr"
      title="请选择开关总路数"
      @close="showSwitchNumPop = false"
      @select="SwitchNumPopSelect"
    >
    </u-action-sheet>
  </view>
</template>

<script>
  import { timestampToDatetime } from '@/untils/index';
  import request from '@/request/api';
	export default {
    filters: {
      setTime(val){
        return timestampToDatetime(val)
      }
		},
		data() {
			return {
        showOtherDevice: false,
        SwitchShowDetail: false,
        switchDefaultValue: false,
        makeArr: [],
        showSwitchNumPop: false,
        showSwitchPop: false,
        showAddSwtich: false,
        globalIndex: 0,
        showtahinput: false,
        addRuleID: 0,
        ruleIDAPI: '',
        showFirst: true, 
        tahDeviceArr: [],
        switchArr: [],
        resultArr: [],
        allSwitchData: [],
        switchModel: {
          switchInfo: {
            switchName: '',
            num: 1,
            ID: '',
          }
        },
        rulesForSwitch: {
          'switchInfo.switchName': {
            type: 'string',
            required: true,
            message: '请选择开关',
            trigger: ['blur', 'change']
          }
        },
        deviceModel: {
          deviceInfo: {
            maxH: '',
            minH: '',
            minT: '',
            maxT: ''
          },
        },
        rules: {
          'deviceInfo.maxH': {
            type: 'string',
            required: true,
            message: '请填写温度上限',
            trigger: ['blur', 'change']
          },
          'deviceInfo.minH': {
            type: 'string',
            required: true,
            message: '请填写温度下限',
            trigger: ['blur', 'change']
          },
          'deviceInfo.maxT': {
            type: 'string',
            required: true,
            message: '请填写温度上限',
            trigger: ['blur', 'change']
          },
          'deviceInfo.minT': {
            type: 'string',
            required: true,
            message: '请填写温度下限',
            trigger: ['blur', 'change']
          }
        },
        otherDevice: {
          deviceInfo: {
            maxAq: '',
            minAq: '',
            maxTrd: '',
            minTrd: '',
            maxTrddl: '',
            minTrddl: '',
            maxTrfl: '',
            minTrfl: '',
            maxTrj: '',
            minTrj: '',
            maxTrl: '',
            minTrl: '',
            maxTrsjd: '',
            minTrsjd: ''
          },
        },
				messageObj:{}
			}
		},
    components: {
      
		},
		onLoad(e) {
      this.ruleIDAPI = e.id
		},
    onShow(){
      this.getDetailInPAGE()
    },
		methods: {
      toSetInputDetail(index,type){
        this.globalIndex = index
        if (type === 1) {
          this.showtahinput = true
          this.deviceModel.deviceInfo = this.resultArr[this.globalIndex]
        } else {
          this.showOtherDevice = true
          this.otherDevice.deviceInfo = this.resultArr[this.globalIndex]
        }
      },
      getResultArr(){
        let lastArr = JSON.stringify(this.resultArr)
        let funArr = JSON.parse(lastArr)
        for (const el of funArr) {
          for (const j of el.switchRuleList) {
            j.value = j.value === true ? 1 : 0
          }
        }
        // console.log(funArr);
        
        let options = {
          url: '/componentRule/add',
          method: 'post',
          data: {
            componentId: parseInt(this.ruleIDAPI),
            tahRuleList: funArr
          }
        }
        request(options).then(res => {
          if (res.code === '200') {
            uni.$u.toast('成功')
            uni.navigateBack()
          }
        })
      },
      deleteAllSwitchData(index){
        this.allSwitchData.splice(index, 1)
      },
      deletrResultArr(index){
        this.resultArr.splice(index, 1)
      },
      addTahDevice(){
        this.showFirst = true
        this.globalIndex = this.resultArr.length
      },
      addAgainSwitch(){
        this.showAddSwtich = true
        this.SwitchShowDetail = false
      },
      SwitchDetail(index){
        this.globalIndex = index
        this.allSwitchData = this.resultArr[index].switchRuleList
        this.SwitchShowDetail = true
      },
      submitSwitch(){
        this.$refs.switchForm.validate().then(resLog => {
          this.resultArr[this.globalIndex].switchRuleList.push({
            switchName: this.switchModel.switchInfo.switchName,
            switchId: this.switchModel.switchInfo.ID,
            num: this.switchModel.switchInfo.num,
            value: this.switchDefaultValue
          })
          this.showAddSwtich = false
        }).catch( error => {
          uni.$u.toast('校验失败')
        })
      },
      SwitchPopSelect(val){
        this.switchModel.switchInfo.switchName = val.name
        this.switchModel.switchInfo.ID = val.id
        this.switchModel.switchInfo.num = 0
        this.makeArr = []
        for (let index = 0; index < val.switchCount; index++) {
          let num = index+1
          this.makeArr.push({
            name: num
          })
        }
      },
      SwitchNumPopSelect(val){
        this.switchModel.switchInfo.num = val.name
      },
      changeValue(val){
        this.switchDefaultValue = val
      },
      showSwitchFun(){
        this.showSwitchPop = true
        if (this.showSwitchNumPop = true) {
          this.showSwitchNumPop = false
        }
      },
      showSwitchNumFun(){
        this.showSwitchNumPop = true
        if (this.showSwitchPop = true) {
          this.showSwitchPop = false
        }
      },
      addSwitch(index){
        this.globalIndex = index
        this.showAddSwtich = true
      },
      submitTah(){
        this.$refs.tahForm.validate().then(resLog => {
          this.resultArr[this.globalIndex].maxH = this.deviceModel.deviceInfo.maxH
          this.resultArr[this.globalIndex].minH = this.deviceModel.deviceInfo.minH
          this.resultArr[this.globalIndex].maxT = this.deviceModel.deviceInfo.maxT
          this.resultArr[this.globalIndex].minT = this.deviceModel.deviceInfo.minT
          this.resultArr[this.globalIndex].switchRuleList = []
          this.showtahinput = false
          this.deviceModel.deviceInfo = {
            maxH: '',
            minH: '',
            minT: '',
            maxT: ''
          }
        }).catch( error => {
          uni.$u.toast('校验失败')
        })
      },
      submitOther(){
        this.resultArr[this.globalIndex].maxAq = this.otherDevice.deviceInfo.maxAq
        this.resultArr[this.globalIndex].minAq = this.otherDevice.deviceInfo.minAq
        this.resultArr[this.globalIndex].maxTrd = this.otherDevice.deviceInfo.maxTrd
        this.resultArr[this.globalIndex].minTrd = this.otherDevice.deviceInfo.minTrd
        this.resultArr[this.globalIndex].maxTrddl = this.otherDevice.deviceInfo.maxTrddl
        this.resultArr[this.globalIndex].minTrddl = this.otherDevice.deviceInfo.minTrddl
        this.resultArr[this.globalIndex].maxTrfl = this.otherDevice.deviceInfo.maxTrfl
        this.resultArr[this.globalIndex].minTrfl = this.otherDevice.deviceInfo.minTrfl
        this.resultArr[this.globalIndex].maxTrj = this.otherDevice.deviceInfo.maxTrj
        this.resultArr[this.globalIndex].minTrj = this.otherDevice.deviceInfo.minTrj
        this.resultArr[this.globalIndex].maxTrl = this.otherDevice.deviceInfo.maxTrl
        this.resultArr[this.globalIndex].minTrl = this.otherDevice.deviceInfo.minTrl
        this.resultArr[this.globalIndex].maxTrsjd = this.otherDevice.deviceInfo.maxTrsjd
        this.resultArr[this.globalIndex].minTrsjd = this.otherDevice.deviceInfo.minTrsjd
        this.resultArr[this.globalIndex].switchRuleList = []
        this.showOtherDevice = false
        this.otherDevice.deviceInfo = {
          maxAq: '',
          minAq: '',
          maxTrd: '',
          minTrd: '',
          maxTrddl: '',
          minTrddl: '',
          maxTrfl: '',
          minTrfl: '',
          maxTrj: '',
          minTrj: '',
          maxTrl: '',
          minTrl: '',
          maxTrsjd: '',
          minTrsjd: ''
        }
      },
      getDetailInPAGE(){
        let options = {
          url: '/deviceComponent/detail',
          method: 'GET',
          data: {
            componentId: this.ruleIDAPI
          }
        }
        request(options).then(res => {
          if (res.code === '200') {
            this.addRuleID = res.data.id
            let arr = res.data.deviceList
            // console.log(arr);
            
            for (const el of arr) {
              if (el.deviceType === 2) {
                this.switchArr.push(el)
              } else if (el.deviceType !== 0 && el.deviceType !== 2 && el.deviceType !== 4) {
                this.tahDeviceArr.push(el)
              }
            }
          }
        })
      },
      tahSelect(val){
        if (val.deviceType === 1) {
          this.resultArr.push({
            tagDeviceType: val.deviceType,
            tahName: val.name,
            tahId: val.id,
            maxH: '',
            maxT: '',
            minH: '',
            minT: '',
            switchRuleList: []
          })
          this.showtahinput = true
          this.closeTah()
        } else {
          this.resultArr.push({
            tagDeviceType: val.deviceType,
            tahName: val.name,
            tahId: val.id,
            maxAq: '',
            minAq: '',
            maxTrd: '',
            minTrd: '',
            maxTrddl: '',
            minTrddl: '',
            maxTrfl: '',
            minTrfl: '',
            maxTrj: '',
            minTrj: '',
            maxTrl: '',
            minTrl: '',
            maxTrsjd: '',
            minTrsjd: '',
            switchRuleList: []
          })
          this.showOtherDevice = true
          this.closeTah()
        }
      },
      closeTah(){
        if (this.resultArr.length > 0) {
          this.showFirst = false
        } else {
          uni.$u.toast('请先选择温湿度设备')
          return false
        }
      },
      close(){}
		}
	}
</script>

<style lang="scss">
.innerTahBox {
  width: 90vw;
  height: auto;
  padding: 20rpx;
}
.afterForSwitchforOne {
  margin: 30rpx 0;
  width: 100%;
  :nth-child(1) {
    width: 30%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 10rpx;
    background-color: #3c9cff;
    color: #fff;
  }
  :nth-child(2) {
    width: calc(30% - 2rpx);
    height: calc(80rpx - 2rpx);
    line-height: 78rpx;
    text-align: center;
    border-radius: 10rpx;
    border: 1rpx solid #909399;
    color: #000;
  }
}
.afterForSwitch {
  margin: 30rpx 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  :nth-child(1) {
    width: 30%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 10rpx;
    background-color: #3c9cff;
    color: #fff;
  }
  :nth-child(2) {
    width: calc(30% - 2rpx);
    height: calc(80rpx - 2rpx);
    line-height: 78rpx;
    text-align: center;
    border-radius: 10rpx;
    border: 1rpx solid #909399;
    color: #000;
  }
}
.topForSwitch {
  margin: 10rpx;
  width: 30%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 10rpx;
  background-color: #3c9cff;
  color: #fff;
}
.lastForSwitch {
  margin-top: 30rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  .customButton {
    width: 90%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 10rpx;
    background-color: #3c9cff;
    color: #fff;
  }
}

.realBox_two {
  width: 95%;
  height: auto;
  border: 1rpx solid #000;
  margin: 15rpx auto;
}
.titleBoxFIR {
  width: 100%;
  font-weight: 400;
  font-size: 40rpx;
  color: #000;
}
.firLine {
  width: 94%;
  margin: 10rpx 3%;
  padding: 20rpx 0;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.lineEvery {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1rpx;
  background-color: #000;
}
.senBox {
  width: 94%;
  margin: 10rpx 3%;
  padding: 20rpx 0;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.senBox .deviceArg {
  width: 60rpx;
  text-align: center;
}
.imageBox {
  width: 100%;
  height: 45rpx;
}
.imageBox image {
  width: 70%;
  height: 100%;
  margin-left: 15%;
}
.thrBox {
  position: relative;
  width: 94%;
  margin: 10rpx 3%;
  padding: 20rpx 0;
}
.thrFlex {
  width: 94%;
  height: auto;
  margin: 10rpx 3%;
  line-height: 35rpx;
}
.switchShowBoxFirLine {
  background-color: #accdee;
  color: #fff;
  width: 100%;
  height: 40rpx;
  line-height: 40rpx;
  display: flex;
  justify-content: space-between;
}
.switchShowBox {
  width: 100%;
  height: 40rpx;
  line-height: 40rpx;
  display: flex;
  margin-top: 15rpx;
}
.switchIndex {
  width: 10%;
  text-align: center;
}
.switchNameBox {
  width: 40%;
  text-align: center;
}
.switchNumBox {
  width: 10%;
  text-align: center;
}
.switchStatusBox {
  width: 10%;
  text-align: center;
  padding: 0 5%;
}
.switchFunBox {
  width: 20%;
  text-align: center;
}

.u-icon__icon {
  margin: 0 auto;
}
.addIcon {
  display: flex;
  justify-content: space-around;
  .submitButton {
    width: 30%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 10rpx;
    background-color: #3c9cff;
    color: #fff;
  }
}
</style>
